<template>
  <div class="categories">
    <!-- 面包屑导航 -->
    <Breadcrumb />
    <div class="box">
      <!-- 根据store的值显示不同的组件 -->
      <categories v-show="store === 'categories'"></categories>
      <goods v-show="store === 'goods'"></goods>
      <orders v-show="store === 'orders'"></orders>
      <params v-show="store === 'params'"></params>
      <reports v-show="store === 'reports'"></reports>
      <rights v-show="store === 'rights'"></rights>
      <roles v-show="store === 'roles'"></roles>
      <users v-show="store === 'users'"> </users>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入组件
import categories from './categories/index.vue'
import goods from './goods/index.vue'
import orders from './orders/index.vue'
import params from './params/index.vue'
import reports from './reports/index.vue'
import rights from './rights/index.vue'
import roles from './roles/index.vue'
import users from './users/index.vue'
// 导入仓库
import { useCounterStoreB } from '@/stores/temporary'
// 导入面包屑导航组件
import Breadcrumb from './Breadcrumb/index.vue'
//  获取仓库
const store = ref('users')
nextTick(() => {
  store.value = useCounterStoreB().path
})
// 监听仓库的变化

watch(
  () => useCounterStoreB().path,
  (i) => {
    store.value = i
  },
)
</script>

<style scoped lang="scss">
.box {
  height: 70vh;
  background: #fff;
  margin-top: 2%;
  border-radius: 3px;
  box-shadow: 1px 4px 5px #00000061;
  overflow: hidden;
  padding: 1.5%;
}
</style>
